<template>
  <div>
    <a-page-header title="人民币管理" @back="() => $router.push({ name: 'dashboard' })">
      <template #tags>
        <a-tag color="purple">
          <template #icon>
            <iconpark-icon :name="rmbType"></iconpark-icon>
          </template>
          {{ rmbTypeValue }}
        </a-tag>
      </template>
      <template #extra>
        <Model :Type="rmbType" @load-table="loadTable" />
        <a-select v-model:value="rmbType" :options="options" @change="selectRmbType">
          <template #suffixIcon>
            <iconpark-icon :name="rmbType"></iconpark-icon>
          </template>
        </a-select>
      </template>
    </a-page-header>
    <RmbTable ref="tableRef" :type="rmbType" @count="addMoney" />
  </div>
</template>

<script>
import { defineComponent, getCurrentInstance, computed, ref } from "vue";
import Model from "./Model.vue";
import RmbTable from "@/components/RmbTable.vue";
export default defineComponent({
  setup() {
    const { proxy } = getCurrentInstance();
    const expenseValue = ref(0);
    const incomeValue = ref(0);
    const rmbType = ref("expense");
    const tableRef = ref("");
    const options = ref([
      { value: "expense", label: "支出" },
      { value: "income", label: "收入" },
    ]);
    const rmbTypeValue = computed(() => {
      if (rmbType.value === "expense") return expenseValue;
      else return incomeValue;
    });
    const rmbTypeAdd = computed(() => {
      if (rmbType.value === "expense") return "addExpense";
      else return "addIncome";
    });
    const selectRmbType = (e) => {
      tableRef.value.getList(e, ["", ""]);
    };
    const loadTable = () => {
      tableRef.value.getList(rmbType.value, ["", ""]);
    };
    function addMoney(e) {
      if (rmbType.value === "expense") expenseValue.value = e;
      else incomeValue.value = e;
    }
    return {
      rmbType,
      expenseValue,
      incomeValue,
      options,
      rmbTypeValue,
      rmbTypeAdd,
      tableRef,
      selectRmbType,
      loadTable,
      addMoney,
    };
  },
  components: { Model, RmbTable },
});
</script>
